<!--
 * 库存审核
-->
<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="商品名称">
        <el-input v-model="formInline.goodsName" placeholder></el-input>
      </el-form-item>
      <el-form-item v-if="userInfo.userType != '3'" label="营销区域">
        <el-select v-model="formInline.baseCode" clearable>
          <el-option v-for="item in rentalPayWay" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专卖店">
        <el-input v-model="formInline.storeName" placeholder="请输入专卖店" />
        <!-- <el-select v-model="formInline.orgSeq">
          <el-option v-for="item in storeList" :key="item.id" :label="item.storeName" :value="item.orgSeq"></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.auditStatus">
          <el-option label="全部" value=""></el-option>
          <el-option label="待审核" :value="0"></el-option>
          <el-option label="审核通过" :value="1"></el-option>
          <el-option label="审核不通过" :value="-1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
        <el-button type="success" plain @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
        <el-button type="warning" plain icon="el-icon-document-checked" @click="allAudit()" size="mini">批量审核</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%" v-loading="loading" border height="600px" ref="multipleTableRef"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }" @selection-change="handleSelectionChange"
      class="table-wrapper">
      <el-table-column type="selection" width="55" header-align="center" align="center" :selectable="selectable" />
      <el-table-column prop="goodsInfo.goodsName" label="商品名称" header-align="center"></el-table-column>
      <el-table-column prop="goodsInfo.goodsSeq" label="商品编号" header-align="center"></el-table-column>
      <el-table-column label="商品图片" header-align="center" :align="'center'" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.goodsInfo && scope.row.goodsInfo.picture && scope.row.goodsInfo.picture.picUrl"
            @click="$seeImage({ currentTarget: { currentSrc: scope.row.goodsInfo.picture.picUrl } })">
            <el-image style="width: 80px; height: 80px" :src="scope.row.goodsInfo.picture.picUrl" fit="cover" />
          </div>
          <img v-else class="img-cover" src="@/assets/images/login/default-goods.png">
        </template>
      </el-table-column>
      <el-table-column label="计量单位" header-align="center" prop="unit"></el-table-column>
      <el-table-column label="商品类型" prop="goodsInfo.goodsTypeName" header-align="center">
        <!-- <template slot-scope="scope">
          {{ scope.row.goodsInfo ? (scope.row.goodsInfo.goodsStyle === 1 ? '普通商品' : scope.row.goodsInfo.goodsStyle === 2 ? '宴席商品' : "生日活动专属") : '/' }}
        </template> -->
      </el-table-column>
      <el-table-column label="建议零售价" header-align="center" prop="goodsInfo.salePrice"></el-table-column>
      <el-table-column label="会员价" header-align="center" prop="goodsInfo.memberPrice"></el-table-column>
      <!-- <el-table-column label="已售数量" header-align="center" prop="goodsInfo.amount"></el-table-column> -->

      <el-table-column label="当前库存" header-align="center" prop="amount"></el-table-column>
      <el-table-column label="申请库存" header-align="center">
        <template slot-scope="scope">
          {{ JSON.parse(scope.row.auditData).amount - JSON.parse(scope.row.auditData).beforeAmount }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="申请后库存" header-align="center" width="100px">
        <template slot-scope="scope">
          {{ JSON.parse(scope.row.auditData).amount }}
        </template>
      </el-table-column> -->
      <el-table-column label="审核状态" header-align="center">
        <template slot-scope="scope">
          {{ scope.row.auditStatus == 0 ? '待审核' : scope.row.auditStatus == 1 ? '审核通过' : '审核不通过' }}
        </template>
      </el-table-column>
      <el-table-column label="审核备注" header-align="center" prop="auditReason" show-overflow-tooltip></el-table-column>
      <el-table-column label="营销区域" header-align="center" prop="storeInfo.baseName"></el-table-column>
      <el-table-column label="专卖店" header-align="center" prop="storeInfo.storeName"></el-table-column>
      <el-table-column label="审核时间" header-align="center" prop="auditTime" width="180px"
        align="center"></el-table-column>
      <el-table-column label="是否预售" header-align="center" :align="'center'">
        <template slot-scope="scope">
          {{ scope.row.isPresale == 0 ? '否' : '是' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" width="180px" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.auditStatus == 0" type="text" size="mini"
            @click="handleClick(scope.row, 1)">审核</el-button>
          <el-button type="text" size="mini" @click="handleClick(scope.row, 2)">审核详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 200]" :current-page="listQuery.current" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <AuditDialog :show.sync="showDialog" :detail="curDetail" :multipleIds="multipleSelection" :curType="dialogType"
      @refresh="search" @close="closeDialog" />
  </div>
</template>

<script>
// import XLSX from 'xlsx';
import { getAllBase } from '@/api/addShopapply.js';
import { queryStockAuditList, queryShopDetailListByScope } from '@/api/stockAudit';
import AuditDialog from './components/AuditDialog.vue';
export default {
  components: {
    AuditDialog
  },
  data() {
    return {
      formInline: {
        goodsName: '',
        baseCode: '',
        storeName: '',
        // orgSeq: '',
        auditStatus: '',
      },
      rentalPayWay: [],
      storeList: [],
      tableData: [],
      loading: false,
      total: 0,
      listQuery: {
        current: 1,
        size: 10,
      },
      showDialog: false,
      curDetail: {},
      dialogType: 1,
      upOrgSeq: '',
      // 多选列表
      multipleSelection: [],
      userInfo: {},
    }
  },
  created() {
    const logininfo = localStorage.getItem('logininfo');
    this.userInfo = JSON.parse(logininfo);
    const orgSeq = JSON.parse(logininfo).orgSeq || JSON.parse(logininfo).orgList[0].orgSeq;
    this.upOrgSeq = orgSeq;
    this.getList();
    this.getBaseList(orgSeq);
  },
  methods: {
    search() {
      this.listQuery.current = 1;
      this.getList();
    },

    kong() {
      this.formInline = this.$options.data().formInline;
    },
    getBaseList(orgSeq) {
      getAllBase({
        code: orgSeq,
      }).then(res => {
        this.rentalPayWay = res.result;
      })
    },
    selCore(baseCode) {
      queryShopDetailListByScope({
        areaSeq: baseCode,
      }).then(res => {
        if (res.code == 1) {
          this.storeList = res.records;
        } else {
          this.$message.error(res.msg || '查询店铺数据失败');
        }
      })
    },
    getList() {
      const data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
          upOrgSeq: this.upOrgSeq
        },
        ascs: [],
        descs: [],
      };

      if(this.userInfo.userType == 3) {
        data.condition.baseCode =this.upOrgSeq
        data.condition.upOrgSeq = ''
      }

      this.loading = true;
      queryStockAuditList(data).then(res => {
        this.tableData = res.records;
        this.total = res.total;
      }).finally(() => {
        this.loading = false;
      })
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },

    handleClick(row, type) {
      this.curDetail = row;
      this.showDialog = true;
      this.dialogType = type;
    },

    selectable(row) {
      return row.auditStatus == 0
    },
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.multipleSelection = val.map(item => item.uuid)
      } else {
        this.multipleSelection = []
      }
    },
    closeDialog() {
      this.multipleSelection = [];
      this.curDetail = {};
      this.$refs.multipleTableRef.clearSelection();
    },

    // 批量审核
    allAudit() {
      if (this.multipleSelection.length == 0) {
        this.$message.error('请先勾选需要审核的数据');
        return
      }
      this.$confirm('确定进行批量审核吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.showDialog = true;
        this.dialogType = 1;
      }).catch(() => {
        this.multipleSelection = [];
        this.$refs.multipleTableRef.clearSelection();
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-wrapper {
  /deep/ .el-table__fixed-right .el-table__fixed-body-wrapper {
    height: 515px !important;
  }
}

.img-cover {
  width: 60px;
  height: 58px;
  object-fit: cover;
}
</style>